<template>
    <div id="tabs">
        <span>{{todos.length}} items left</span>
        <span id="choice">
<!--            <button :class="{choiced: filter === 'all'}">all</button>-->
<!--            <button :class="{choiced: filter === 'active'}">active</button>-->
            <button
                    v-for="(state,index) in states"
                    :class="{choiced: filter === state}"
                    @click="toggleFilter(index)"
            >{{state}}</button>
        </span>
        <button @click="clearCompleted">Clear Completed</button>
    </div>
</template>

<script>
    export default {
        name: "tabs",
        props: ['todos','filter'],
        data () {
            return {
                states : ['all', 'active', 'completed']
            }
        },
        methods: {
            toggleFilter(i){
                this.$emit('toggle', this.states[i])
            },
            clearCompleted(){
                this.$emit('clear')
            }
        }
    }
</script>

<style lang="stylus" scoped>
    #tabs
        display flex
        justify-content space-around
        margin-top 10px
        #choice
            button
                border none
                background none
                font-size 14px
                outline none
            .choiced
                border-radius 5px
                border 1px solid #cd5c5c
                padding 5px
        >button
            border none
            background none
            font-size 14px
            outline none
</style>